{% extends "admin/common/base.html" %}

{% block title %}新建blog{% endblock %}

{% block top_css %}
    <link rel="stylesheet" href="/admin/edit-md/css/editormd.css"/>
    <style>
        .center {
            display: block;
            width: 100%;
        }

        .center button {
            float: right;
            margin-left: 10px;
        }

        .my-autocomplete {

        li {
            line-height: normal;
            padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }

        }
        }

        .el-tag + .el-tag {
            margin-left: 10px;
        }

        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }


    </style>
{% endblock %}

{% block content %}
    <div class="row">
        <!-- Basic example -->
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="exampleInputEmail1">标题</label>
                            <input type="text" v-model="article.title" class="form-control" placeholder="标题">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">封面</label>
                            <input v-model="article.pic_url" type="text" class="form-control" placeholder="封面">
                        </div>
                    </form>
                </div><!-- panel-body -->
            </div> <!-- panel -->
        </div> <!-- col-->
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div role="form">
                        <div class="form-group">
                            <label for="exampleInputEmail1">文章组</label>
                            <el-autocomplete
                                    v-model="state"
                                    :fetch-suggestions="querySearchAsync"
                                    placeholder="请输入内容"
                                    @select="handleSelect"
                            ></el-autocomplete>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">文章权限</label>
                            <el-switch
                                    v-model="article.is_comment"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                            </el-switch>
                        </div>
                        <el-tag
                                :key="tag"
                                v-for="tag in article.labels"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag)">
                            {{ "{{ tag }}" }}
                        </el-tag>
                        <el-input
                                class="input-new-tag"
                                v-if="inputVisible"
                                v-model="inputValue"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter.native="handleInputConfirm"
                                @blur="handleInputConfirm">
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                    </div>
                </div><!-- panel-body -->
            </div> <!-- panel -->
        </div> <!-- col-->

        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="exampleInputEmail1">文章摘要</label>
                            <input type="text" v-model="article.summary" class="form-control" placeholder="文章摘要">
                        </div>
                    </form>
                </div><!-- panel-body -->
            </div> <!-- panel -->
        </div> <!-- col-->
    </div>
    <div id="md-editor">
        <textarea style="display:none;"></textarea>
    </div>
    <div class="center">
        <button @click="saveArticle" id="submitBlog" type="button"
                class="btn btn-purple btn-info waves-effect waves-light w-md m-b-5">
            提交
        </button>
        <button @click="saveToDraft" id="draftBlog" type="button"
                class="btn btn-purple btn-info waves-effect waves-light w-md m-b-5">
            草稿
        </button>
    </div>

{% endblock %}

{% block bottom_js %}
    <script src="/common/js/jquery.min.js"></script>
    <script src="/admin/edit-md/editormd.min.js"></script>
{% endblock %}

{% block bottom_script %}
    <script>
        let app = new Vue({
            el: '#wrapper',
            data: {
                mdEditor: {},
                article: {
                    document_type: 'markdown',
                    summary: '',
                    title: '',
                    pic_url: '',
                    is_comment: true,
                    is_draft: false,
                    group_id: '',
                    labels: [],
                    resources: [],
                    content: "",
                    uuid: '{{article.uuid}}'
                },
                inputVisible: false,
                inputValue: '',
                restaurants: [],
                state: '',
                timeout: null
            },
            methods: {
                loadAll() {
                    return [
                        {"value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号"},
                        {"value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号"},
                        {"value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"},
                        {"value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
                    ];
                },
                querySearchAsync(queryString, cb) {
                    var restaurants = this.restaurants;
                    var results = restaurants;

                    clearTimeout(this.timeout);
                    this.timeout = setTimeout(() => {
                        cb(results);
                    }, 3000 * Math.random());
                },
                createStateFilter(queryString) {
                    return (state) => {
                        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                    };
                },
                handleSelect(item) {
                    console.log(item);
                },
                handleClose(tag) {
                    this.article.labels.splice(this.article.labels.indexOf(tag), 1);
                },

                showInput() {
                    this.inputVisible = true;
                    this.$nextTick(_ => {
                        this.$refs.saveTagInput.$refs.input.focus();
                    });
                },

                handleInputConfirm() {
                    let inputValue = this.inputValue;
                    if (inputValue) {
                        this.article.labels.push(inputValue);
                    }
                    this.inputVisible = false;
                    this.inputValue = '';
                },
                saveToDraft() {
                    this.article.is_draft = true;
                    this.article["content"] = this.mdEditor.getMarkdown();
                    request({
                        url: baseUrl + "/api/article",
                        method: 'post',
                        data: this.article,
                    }).then((response) => {
                        console.log(response)
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                saveArticle() {
                    this.article["content"] = this.mdEditor.getMarkdown();
                    console.log(this.article);
                    request({
                        url: baseUrl + "/api/article/edit_article",
                        method: 'post',
                        data: this.article,
                    }).then((response) => {
                        if (response.data == 'success') {
                            window.location.href = "/admin/article_manage/1";
                        } else {
                            alert("发布失败");
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                createEditor() {
                    this.mdEditor = editormd("md-editor", {
                        width: "100%",
                        height: 500,
                        syncScrolling: "single",
                        imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL: "/api/upload",
                        emoji: true,
                        path: "/admin/edit-md/lib/",
                        onload: () => {
                            // 引入插件 执行监听方法
                            editormd.loadPlugin("/admin/edit-md/plugins/image-handle-paste/image-handle-paste", () => {
                                this.mdEditor.imagePaste();
                            });
                            // 引入插件 执行监听方法
                            editormd.loadPlugin("/admin/edit-md/plugins/code-auto-save/code-auto-save", () => {
                                // 初始化插件 实现监听
                                this.mdEditor.CodeAutoSave();
                            });
                        },


                        // 工具栏添加一个自定义方法
                        toolbarIcons: function () {
                            // 给工具栏full模式添加一个自定义方法
                            return editormd.toolbarModes.full.concat(["customIcon"]);
                        },
                        // 自定义方法的图标 指定一个FontAawsome的图标类
                        toolbarIconsClass: {
                            customIcon: "fa-paste"
                        },
                        // 没有图标可以插入内容，字符串或HTML标签
                        toolbarIconTexts: {
                            customIcon: "从草稿箱加载"
                        },
                        // 图标的title
                        lang: {
                            toolbar: {
                                customIcon: "从草稿箱加载"
                            }
                        },
                        // 自定义工具栏按钮的事件处理
                        toolbarHandlers: {
                            customIcon: () => {
                                // 读取缓存内容
                                this.mdEditor.CodeAutoSaveGetCache();
                            }
                        }

                    });
                },
            },
            mounted: function () {
                this.createEditor();
            }
        })

    </script>

{% endblock %}